<template>
  <div class="header">
    <div class="content-warpper">
      <div class="img-wrap">
        <img class="avatar" :src="seller.avatar">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          <span>{{seller.description}}</span>
          <span>/</span>
          <span>{{seller.deliveryTime}}分钟送达</span>
        </div>
        <div v-if="seller.supports && classMap.length > 0" class="supports">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="name">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div class="support-count" @click="handleClickBulletin">
        <span>{{count}}个</span><span class="icon-keyboard_arrow_right"></span>
      </div>
    </div>
    <div class="bulletin-wrapper" @click="handleClickBulletin">
      <div class="icon"></div>
      <div class="title">{{seller.bulletin}}</div>
      <div class="icon-keyboard_arrow_right"></div>
    </div>

    <div class="bgImg-wrap">
      <img class="bgImg" :src="seller.avatar">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    seller: Object,
    classMap: Array
  },
  methods: {
    handleClickBulletin () {
      this.$emit('openDiscount')
    }
  },
  computed: {
    count () {
      if (this.seller.supports && this.seller.supports.length) {
        return this.seller.supports.length
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .header
    position: relative
    height: 268px
    background:rgba(7,17,27,.5)
    color: #fff
    overflow:hidden
    .content-warpper
      padding:48px 24px 36px 48px
      display:flex
      position: relative
      .img-wrap
        padding-right:32px
        .avatar
          display:block
          width:128px
          height:128px
          border-radius:4px
      .content
        flex:1
        height:36px
        .title
          margin:4px 0 16px
          font-size:0px
          font-weight:bold
          .brand
            vertical-align: middle
            display:inline-block
            width:60px
            height:36px
            bg-image('brand')
            background-size:60px 36px
          .name
            vertical-align: middle
            font-size:32px
            margin-left:12px
        .description
          font-size:24px
          margin-bottom:20px
        .supports
          font-size:0px
          .icon
            vertical-align: middle
            margin-right:8px
            display:inline-block
            width:24px
            height:24px
            background-size:24px 24px
          .decrease
            bg-image('decrease_1')
          .discount
            bg-image('discount_1')
          .guarantee
            bg-image('guarantee_1')
          .invoice
            bg-image('invoice_1')
          .special
            bg-image('special_1')
          .name
            vertical-align: middle
            font-size:20px
      .support-count
        position: absolute
        right: 24px
        bottom:36px
        padding:0px 16px
        line-height:48px
        background:rgba(0, 0, 0, .2)
        font-size:20px
        border-radius: 28px
        .icon-keyboard_arrow_right
          margin-left:4px
          line-height:48px
    .bulletin-wrapper
      display:flex
      justify-content: space-between
      align-items: center
      padding:0 24px
      background:rgba(7, 17, 27, .2)
      height:56px
      font-size:20px
      .icon
        width:44px
        height:24px
        padding-right:8px
        bg-image('bulletin')
        background-size:44px 24px
      .title
        flex:1
        padding-right:8px
        ellipsis()
    .bgImg-wrap
      position: absolute
      top:0
      right:0
      bottom:0
      left:0
      overflow:hidden
      z-index:-1
      filter: blur(10px)
      .bgImg
        display:block
        width:100%
        height:100%
</style>
